<html>
  <head>
    <script>
      function onLoad() {
        // Add a event listener to handle the event named 'colorChange'
        CallBridge.addEventListener(
          // event name
          "colorChange",

          // event handler
          function (color) {
            console.log("request change background color to: ", color);
            // change the background color
            document.getElementById("main").style.backgroundColor = color;
          }
        );
      }

      function onInvokeMethodClicked(name, ...arg) {
        CallBridge.invokeMethod(name, ...arg);
      }

      function onCallBridgeQueryClicked() {
        var query = {
          request: document.getElementById("message").value,
          onSuccess: function (response) {
            alert(response);
          },
          onFailure: function (error_code, error_message) {
            alert(error_message);
          },
        };
        window.CefViewQuery(query);
      }
    </script>
    <style>
      .noselect {
        user-select: none;
        /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
      }
    </style>
  </head>

  <body onload="onLoad()" id="main" class="noselect">
    <h1 align="center" style="font-size: 12pt">Web Area</h1>
    <div align="center">
      <label> Test Case for InvokeMethod </label>
      <br />
      <input
        type="button"
        value="Invoke Method"
        onclick="onInvokeMethodClicked('TestMethod', 1, false, 'arg3')"
      />
      <br />
      <br />

      <label> Test Case for QCefQuery </label>
      <br />
      <textarea id="message" style="width: 320px; height: 120px">
this message will be processed by native code.</textarea
      >
      <br />
      <input type="button" value="Query" onclick="onCallBridgeQueryClicked()" />
      <br />
      <br />

      <!--
      <div style="background-color: green; -webkit-app-region: drag">
        <h1>Dragging area</h1>
      </div>
      <br />
      <br /> 
      -->
    </div>
  </body>
</html>
